<script lang="ts" setup>
import type { PropType } from 'vue';

import { computed, onBeforeMount, ref } from 'vue';

import { usePreferences } from '@vben/preferences';

import { Space, Tag } from 'ant-design-vue';

import { useDictStore } from '#/store/dict';

defineOptions({
  inheritAttrs: false,
});
const props = defineProps({
  value: {
    type: [String, Number, Array],
    default: undefined,
  },
  data: {
    // 当前行数据
    type: Object,
    default: () => {},
  },
  code: {
    type: String,
    default: undefined,
  },
  colorMap: {
    // 标签color映射关系
    type: Object as PropType<Record<number | string, ColorType>>,
    default: () => ({}),
  },
  colorList: {
    // 预设的颜色列表
    type: Array as PropType<ColorType[]>,
    default: () => [
      { textColor: '#13deb9', bgColor: '#E7FCF8' }, // 青绿色系
      { textColor: '#1890ff', bgColor: '#E6F7FF' }, // 蓝色系
      { textColor: '#52c41a', bgColor: '#F6FFED' }, // 绿色系
      { textColor: '#faad14', bgColor: '#FFFBE6' }, // 橙色系
      { textColor: '#722ed1', bgColor: '#F9F0FF' }, // 紫色系
      { textColor: '#f5222d', bgColor: '#FFF1F0' }, // 深红系
      { textColor: '#fa8c16', bgColor: '#FFF7E6' }, // 深橙系
      { textColor: '#a0d911', bgColor: '#FCFFE6' }, // 黄绿系
      { textColor: '#eb2f96', bgColor: '#FFF0F6' }, // 粉色系
      { textColor: '#13c2c2', bgColor: '#E6FFFB' }, // 青色系
      { textColor: '#531dab', bgColor: '#F3EAFD' }, // 深紫系
      { textColor: '#003a8c', bgColor: '#E6F4FF' }, // 深蓝系
      { textColor: '#237804', bgColor: '#F2FFF0' }, // 深绿系
      { textColor: '#d4b106', bgColor: '#FEFFE6' }, // 金黄系
      { textColor: '#d4380d', bgColor: '#FFF2E8' }, // 棕橙系
      { textColor: '#0050b3', bgColor: '#E8F4FF' }, // 宝蓝系
      { textColor: '#389e0d', bgColor: '#F2FFF2' }, // 草绿系
      { textColor: '#b37feb', bgColor: '#F9F0FF' }, // 浅紫系
      { textColor: '#ff7a45', bgColor: '#FFF2E8' }, // 浅橙系
      { textColor: '#36cfc9', bgColor: '#E6FFFB' }, // 浅青系
      { textColor: '#ffec3d', bgColor: '#FEFFE6' }, // 明黄系
      { textColor: '#9254de', bgColor: '#F3EAFD' }, // 薰衣系
      { textColor: '#ffc53d', bgColor: '#FFFBE6' }, // 金橙系
      { textColor: '#ff4d4f', bgColor: '#FFEDED' }, // 玫红系
      { textColor: '#40a9ff', bgColor: '#E6F7FF' }, // 天蓝系
      { textColor: '#73d13d', bgColor: '#F6FFED' }, // 嫩绿系
      { textColor: '#ff85c0', bgColor: '#FFF0F6' }, // 桃粉系
      { textColor: '#ffc069', bgColor: '#FFF7E6' }, // 杏橙系
      { textColor: '#ff4d4f', bgColor: '#FFEDED' }, // 红色系
      { textColor: '#909399', bgColor: '#F4F4F5' }, // 灰色系
    ],
  },
  useColorList: {
    // 是否使用预设的颜色列表
    type: Boolean,
    default: true,
  },
});
const { isDark } = usePreferences();
type ColorType = {
  bgColor?: string;
  textColor?: string;
};
type NewOption = ColorType & {
  children?: NewOption[];
  label: string;
  value: any;
};
// const { isDark } = usePreferences();
const dictStore = useDictStore();
const options = ref<NewOption[]>([]);
const isTag = computed(
  () => Object.keys(props.colorMap).length > 0 || props.useColorList,
);
type NewOptionType = NewOption & { tagProps?: any };
const cValue = computed(() => {
  // 查找匹配的选项并返回标签
  if (Array.isArray(props.value)) {
    // 处理数组值的情况
    return props.value
      .map((val) => {
        const option = options.value.find((opt) => opt.value === val);
        return option ? option.label : val;
      })
      .join(', ');
  } else {
    // 处理单个值的情况
    const option = options.value.find((opt) => opt.value === props.value);
    return option ? option.label : props.value;
  }
});
const createOption = (
  label: number | string,
  value: number | string,
): NewOptionType => ({
  label: String(label),
  value,
});
const createTagOption = (
  option: NewOption | null,
  value: number | string,
  index: number,
): NewOptionType => {
  if (!option) {
    return createOption(value, value);
  }

  // 从 colorMap 获取颜色配置
  const colorMapConfig = props.colorMap[option.value];
  // 从 colorList 获取颜色配置（处理索引越界）
  const colorListConfig =
    props.useColorList && props.colorList.length > 0
      ? props.colorList[index % props.colorList.length]
      : undefined;

  // 优先使用 colorMap 配置，其次使用 colorList 配置
  let colorConfig = colorMapConfig || colorListConfig;
  // 专门处理 yes_no 字典项的颜色
  if (
    props.code === 'yes_no' &&
    Object.keys(colorMapConfig || {}).length === 0
  ) {
    const isYes =
      String(value) === '1' || String(value).toLowerCase() === 'yes';
    colorConfig = isYes
      ? {
          bgColor: '#f0fff3',
          textColor: '#57d188',
        }
      : {
          bgColor: '#fff0f0',
          textColor: '#ff3860',
        };
  }
  const bgColor = option.bgColor || colorConfig?.bgColor;
  const textColor = option.textColor || colorConfig?.textColor;
  // 暗色主题适配
  const tagProps = isDark.value
    ? {
        // 在暗色主题下使用 ant-design-vue 的预设颜色或者自定义颜色
        color: bgColor ? undefined : 'default', // 如果没有自定义背景色，使用默认样式
        style: {
          backgroundColor: bgColor
            ? `color-mix(in srgb, ${bgColor} 20%, transparent)`
            : undefined,
          color: textColor
            ? `color-mix(in srgb, ${textColor} 80%, white)`
            : undefined,
          borderColor: bgColor
            ? `color-mix(in srgb, ${bgColor} 40%, transparent)`
            : undefined,
        },
      }
    : {
        color: bgColor,
        style: {
          color: textColor,
        },
      };
  return {
    ...option,
    tagProps,
  };
};
const cNewOptions = computed<NewOptionType[]>(() => {
  if (Array.isArray(props.value)) {
    return props.value.map((val: any) => {
      const option = options.value.find((opt) => opt.value === val) ?? null;
      // 修复：根据选项在 options 数组中的实际索引来获取 colorList 颜色
      const optionIndex = option ? options.value.indexOf(option) : 0;
      return createTagOption(option, val, optionIndex);
    });
  } else {
    if (props.value === undefined || props.value === null) {
      return [];
    }
    const option = options.value.find((opt) => opt.value === props.value);
    // 修复：根据选项在 options 数组中的实际索引来获取 colorList 颜色
    const optionIndex = option ? options.value.indexOf(option) : 0;
    if (option) {
      return [createTagOption(option, props.value, optionIndex)];
    } else {
      if (props.value !== null && props.value !== undefined) {
        return [createOption(props.value, props.value)];
      }
      return [];
    }
  }
});

onBeforeMount(() => {
  requestData();
});

const requestData = async () => {
  if (!props.code) return;

  try {
    // 从 store 获取字典数据（会自动缓存）
    const data = await dictStore.requestData(props.code);
    options.value = data as any;
  } catch (error) {
    console.error('获取字典数据失败:', error);
    options.value = [];
  }
};
</script>
<template>
  <template v-if="isTag">
    <Space v-if="cNewOptions.length > 0">
      <template v-for="item in cNewOptions" :key="item.value">
        <Tag v-if="item.tagProps" v-bind="item.tagProps" :bordered="false">
          {{ item.label }}
        </Tag>
        <span v-else>{{ item.label }}</span>
      </template>
    </Space>
  </template>
  <span v-else>{{ cValue }}</span>
</template>
